<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六上第6课《猜数字算法设计》猜数字游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .bg-game {
            background-image: url('caishuzi_bg.png');
            background-size: cover;
            background-position: center;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-effect {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .pulse-animation {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
        
        .bounce-in {
            animation: bounceIn 0.6s ease-out;
        }
        
        @keyframes bounceIn {
            0% {
                transform: scale(0.3);
                opacity: 0;
            }
            50% {
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
</head>
<body class="gradient-bg flex items-center justify-center min-h-screen relative">
    <div class="absolute inset-0 bg-game opacity-30"></div> <!-- 背景层 -->
    
    <!-- 游戏内容 -->
    <div id="gameContent" relative z-10>
        <div class="card-effect rounded-2xl p-8 shadow-2xl text-center relative w-full max-w-md mx-4">
            <!-- 右上角显示猜的次数 -->
            <div class="absolute top-4 right-4 bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium shadow-md">
                <span class="inline-block w-2 h-2 bg-red-500 rounded-full mr-1 pulse-animation"></span>
                尝试次数: <span id="attemptsCount">0</span>
            </div>
            <!-- 左上角显示计时器 -->
            <div class="absolute top-4 left-4 bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-medium shadow-md">
                <span class="inline-block w-2 h-2 bg-indigo-500 rounded-full mr-1 pulse-animation"></span>
                时间: <span id="timerText">0.00</span> 秒
            </div>
            
            <!-- 游戏标题 -->
            <div class="mb-6 mt-4">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">🎯 打开智慧之门</h1>
                <p class="text-gray-600">猜一个1到100之间的神秘数字</p>
            </div>
            
            <!-- 输入区域 -->
            <div class="mb-6">
                <input type="number" id="guessInput" class="w-full px-4 py-3 text-lg border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200 bg-white shadow-sm" placeholder="输入你的猜测 (1-100)" min="1" max="100">
            </div>
            
            <!-- 提交按钮 -->
            <button id="guessButton" class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-bold py-3 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 shadow-lg">
                🚀 提交猜测
            </button>
            
            <!-- 结果显示区域 -->
            <div id="result" class="mt-6"></div>
            
            <!-- 答对了的图片默认隐藏 -->
            <div class="mt-4">
                <img id="rightImage" src="right.png" alt="正确" class="hidden absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-48 h-48 bounce-in z-20" />
            </div>
        </div>
    </div>
    

    <script>
        const randomNumber = Math.floor(Math.random() * 100) + 1;
        console.log(randomNumber);
        let attempts = 0;
        let timer = null;
        let milliseconds = 0;

        const guessInput = document.getElementById('guessInput');
        const guessButton = document.getElementById('guessButton');
        const resultElement = document.getElementById('result');
        const attemptsCount = document.getElementById('attemptsCount');
        const timerText = document.getElementById('timerText');

        function startTimer() {
            timer = setInterval(() => {
                milliseconds++;
                timerText.textContent = (milliseconds / 100).toFixed(2);
            }, 10);
        }

        function stopTimer() {
            clearInterval(timer);
        }

        guessButton.addEventListener('click', function() {
            const guess = parseInt(guessInput.value);
            attempts++;
            attemptsCount.textContent = attempts;

            let resultMessage = '';
            let resultClass = '';

            if (isNaN(guess) || guess < 1 || guess > 100) {
                resultMessage = "请输入一个1到100之间的有效数字。";
                resultClass = 'bg-red-100 border-red-400 text-red-700';
                guessInput.classList.add('border-red-500');
                setTimeout(() => {
                    guessInput.classList.remove('border-red-500');
                }, 2000);
            } else if (guess === randomNumber) {
                resultMessage = `
                    <div class="text-center">
                        <div class="text-2xl font-bold mb-2">🎉 恭喜你，猜对了！</div>
                        <div class="text-lg">你共猜了 ${attempts} 次</div>
                        <div class="text-sm text-gray-600 mt-1">用时：${(milliseconds / 100).toFixed(2)} 秒</div>
                    </div>
                `;
                resultClass = 'bg-green-100 border-green-400 text-green-700';
                stopTimer();
                guessButton.disabled = true;
                guessButton.classList.add('opacity-50', 'cursor-not-allowed');
                guessButton.textContent = '🎊 游戏完成';
                
                // 猜对时显示图片3秒
                const rightImage = document.getElementById('rightImage');
                rightImage.classList.remove('hidden');
                setTimeout(() => {
                    rightImage.classList.add('hidden');
                }, 3000);
            } else if (guess < randomNumber) {
                resultMessage = `
                    <div class="flex items-center justify-center">
                        <span class="text-2xl mr-2">📈</span>
                        <div>
                            <div class="font-bold">太小了</div>
                            <div class="text-sm">再试试更大的数字</div>
                        </div>
                    </div>
                `;
                resultClass = 'bg-yellow-100 border-yellow-400 text-yellow-700';
            } else {
                resultMessage = `
                    <div class="flex items-center justify-center">
                        <span class="text-2xl mr-2">📉</span>
                        <div>
                            <div class="font-bold">太大了</div>
                            <div class="text-sm">再试试更小的数字</div>
                        </div>
                    </div>
                `;
                resultClass = 'bg-orange-100 border-orange-400 text-orange-700';
            }

            // 使用样式化的结果显示
            resultElement.innerHTML = `<div class="border ${resultClass} px-4 py-3 rounded-lg shadow-md bounce-in">${resultMessage}</div>`;
            
            // 清空输入框并聚焦
            guessInput.value = '';
            guessInput.focus();
        });

        // 支持回车键提交
        guessInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                guessButton.click();
            }
        });

        window.onload = function() {
            startTimer();
            guessInput.focus();
        };

    </script>
</body>
</html>
